<template>
  <div id="welcome-box">
    <globle-linear-border class="top-box">
      <hello></hello>
    </globle-linear-border>
    <div class="bottom-box">
      <stu-course-table></stu-course-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import Hello from './components/Hello.vue';
import StuCourseTable from './components/StuCourseTable.vue';
</script>

<style lang="scss" scoped>
#welcome-box {
  height: 100%;
  padding: 14px 32px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top-box {
    height: 15%;
  }

  .bottom-box {
    height: 83%;
    .scourse-table {
      padding: 16px;
    }
  }
}
</style>
